<template>
  <div class="box1">
    <a-spin :spinning="loadingTable" style="height: 100%;">
      <a-input-search :placeholder="$t('message.Please_enter_the_organization_name')" v-model="searchValue" clearable allow-clear>
      </a-input-search>
      <div class="m_cbFlex" style="margin-top: 20px;gap: 20px;">
        <span class="m_hoverCP" :title="$t('message.Edit_enterprise_information')" @click="editOrg">{{ orgInfo.departName }}</span>
        <span  class="m_hoverCP" style="color: #a1a1a1;" @click="addOrg">
          <a-icon type="plus" />{{$t('message.Establish_a_new_organization')}}
        </span>

<!--        <a-icon type="unordered-list"/>-->
<!--        <a-dropdown>-->
<!--          <a-icon type="unordered-list"/>-->
<!--          <a-menu slot="overlay">-->
<!--            <a-menu-item>-->
<!--              <a @click="editOrg">编辑企业信息</a>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item>-->
<!--              <a @click="addOrg">新建组织</a>-->
<!--            </a-menu-item>-->
<!--          </a-menu>-->
<!--        </a-dropdown>-->
      </div>
      <!--    height: calc(100vh - 59px - 52px - 24px - 47px - 12px - 12px); overflow-y: auto;-->
      <div style='margin-top: 10px; ' v-if="treeShow">
        <a-tree :tree-data="filterTree" @select="handleNodeClick" :defaultExpandAll="true"
                v-if="filterTree && filterTree.length > 0">
          <template slot="title" slot-scope="{ title,costCalcSubject }">
            <a-icon type="tag" v-if="costCalcSubject"/>
            <a-icon type="folder-add" v-else/>
            <span v-if="title.indexOf(searchValue) > -1">
              {{ title.substr(0, title.indexOf(searchValue)) }}
              <span style="color: #f50">{{ searchValue }}</span>
              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </template>
        </a-tree>
      </div>
    </a-spin>
  </div>
</template>


<script>

import {getAction} from '@/api/manage';
import _ from 'lodash'

export default {
  name: 'leftOrg',
  data() {
    return {
      searchValue: '',
      orgInfo: {},
      treeList: [],
      loadingTable: false,
      url: {
        treeSelectUrl: "/orgDept/getChildTreeByUser",
        getOrgInfo: "/orgDept/getOrgInfo",
      },
      treeShow: true,
    }
  },
  created() {
    this.listTree();
    // this.getOrgInfo()
  },
  computed: {
    filterTree() {
      if (!this.searchValue) {
        return this.treeList
      } else {
        return this.filter(_.cloneDeep(this.treeList), this.searchValue)
      }
    }
  },
  methods: {
    filter(data, value) {
      return data.filter(item => {
        if (item.title.includes(value)) {
          return true;
        }
        if (item.children && item.children.length > 0) {
          item.children = this.filter(item.children, value);
          return item.children.length > 0;
        }
        return false;
      });
    },
    // onChange(e) {
    //   const value = e.target.value;
    //   const expandedKeys = this.treeList
    //     .map(item => {
    //       if (item.title.indexOf(value) > -1) {
    //         return getParentKey(item.key, this.treeData);
    //       }
    //       return null;
    //     })
    //     .filter((item, i, self) => item && self.indexOf(item) === i);
    //   Object.assign(this, {
    //     expandedKeys,
    //     searchValue: value,
    //     autoExpandParent: true,
    //   });
    // },
    handleNodeClick(data) {
      console.log('handleNodeClick', data)
      this.treeValue = data
      if (data[0]) {
        this.$emit("goBack", data[0])
      } else {
        this.$emit("goBack", data[0], 'cancel')
      }
    },
    editOrg() {
      this.treeShow = false
      this.$nextTick(() => {
        this.treeShow = true
      })
      this.$emit("goBack", this.orgInfo.id)
    },
    addOrg() {
      this.treeShow = false
      this.$nextTick(() => {
        this.treeShow = true
      })
      this.$emit("goBack")
    },

    getOrgInfo() {
      getAction(this.url.getOrgInfo, {}).then((res) => {
        if (res.success) {
          this.orgInfo = res.result
          this.$emit("goBack", this.orgInfo.id)
        }
      })
    },
    listTree() {
      this.getOrgInfo()
      this.loadingTable = true;
      this.treeData = [];
      //
      getAction(this.url.treeSelectUrl, {}).then(res => {
        let {success, result} = res;
        if (success) {
          this.treeList = _.cloneDeep(result)
          this.treeData = _.cloneDeep(result)
        }
      }).finally(fin => {
        this.loadingTable = false;
      })
    },

  }
}

</script>
<style lang="less" scoped>

.box1 {
  box-sizing: border-box;
  padding: 24px;
  border-right: 1px solid #E7E7E7;
  height: calc(100vh - 59px - 24px - 24px);
  overflow-y: auto;
}

/deep/ .ant-card-body {
  background: #fff !important;
}

/deep/ .ant-card-small > .ant-card-body {
  padding: 24px !important;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>